<template>
  <div class="supplier-list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="primary" @click="addSupplier">添加供应商</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="供应商名称"></el-table-column>
        <el-table-column prop="contact" label="联系人"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="editSupplier(scope.row)">编辑</el-button>
            <el-button type="text" @click="deleteSupplier(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SupplierList',
  data() {
    return {
      loading: false,
      tableData: [],
      page: 1,
      limit: 10,
      total: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      // TODO: 调用获取供应商列表接口
      setTimeout(() => {
        this.loading = false
        this.tableData = [
          {
            id: 1,
            name: '测试供应商',
            contact: '张三',
            phone: '13800138000',
            address: '北京市朝阳区',
            status: 1
          }
        ]
        this.total = 1
      }, 1000)
    },
    addSupplier() {
      this.$router.push({ name: 'product_supplierAdd' })
    },
    editSupplier(row) {
      this.$router.push({ name: 'product_supplierEdit', params: { id: row.id } })
    },
    deleteSupplier(row) {
      this.$confirm('确认删除该供应商?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用删除供应商接口
        this.$message.success('删除成功')
        this.getList()
      }).catch(() => {})
    },
    handleSizeChange(val) {
      this.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.supplier-list {
  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
}
</style> 